<template>
  <div class="compony">
    <div class="comHead">
      <van-search
        v-model="q"
        fixed
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #left>
          <div class="searchL">公司</div>
        </template>
      </van-search>
      <div class="banner">
        <img src="@/assets/ios3x_img_banner@3x.png" alt="" />
      </div>
      <!-- 推荐 公司选择 -->
      <div class="selectCom">
        <div class="tuijian" @click="tuijian" :class="{ selectItem: option }">
          推荐
        </div>
        <div class="distance" @click="selectDistance">
          距离
          <i class="iconfont arrup" :class="{ selected: option1 }">&#xe6b4;</i>
          <i class="iconfont arrdown" :class="{ selected: option2 }"
            >&#xe644;</i
          >
        </div>
        <div class="score" @click="selectScore">
          评分
          <i class="iconfont arrup" :class="{ selected: option3 }">&#xe6b4;</i>
          <i class="iconfont arrdown" :class="{ selected: option4 }"
            >&#xe644;</i
          >
        </div>
        <div @click="isChoice = true" class="selectAll">筛选</div>
      </div>
    </div>
    <!-- 公司筛选面板弹出 -->
    <div class="choicePop">
      <van-popup
        v-model="isChoice"
        position="top"
        :style="{ height: '80%' }"
        round
      >
        <van-search v-model="q" shape="round" placeholder="请输入搜索关键词">
          <template #left>
            <div class="searchL">公司</div>
          </template>
        </van-search>
        <div class="selectCom">
          <div class="tuijian" @click="tuijian" :class="{ selectItem: !isChoice }">推荐</div>
          <div class="distance" @click="selectDistance">
            距离
            <i class="iconfont arrup" :class="{ selected: option1 }"
              >&#xe6b4;</i
            >
            <i class="iconfont arrdown" :class="{ selected: option2 }"
              >&#xe644;</i
            >
          </div>
          <div class="score" @click="selectScore">
            评分
            <i class="iconfont arrup" :class="{ selected: option3 }"
              >&#xe6b4;</i
            >
            <i class="iconfont arrdown" :class="{ selected: option4 }"
              >&#xe644;</i
            >
          </div>
          <div class="selectAll" :class="{ selectItem: isChoice }">筛选</div>
        </div>
        <div class="choiceItem">
          <h3>距离</h3>
          <div class="distanceItem">
            <div
              @click="showPopSelect"
              :class="{ popActive: option1 }"
              class="item"
            >
              由近到远
            </div>
            <div
              @click="showPopSelect"
              :class="{ popActive: this.option2 }"
              class="item"
            >
              由远及近
            </div>
          </div>
          <h3>评分</h3>
          <div class="scoreItem">
            <div class="itemBox">
              <div @click="choiceScore" :class="{ popActive: scoreRange == '4-5'}" class="item">4分-5分</div>
              <div @click="choiceScore" :class="{ popActive: scoreRange == '3-4'}" class="item">3分-4分</div>
            </div>
            <div class="itemBox">
              <div @click="choiceScore" :class="{ popActive: scoreRange == '2-3'}" class="item">2分-3分</div>
              <div @click="choiceScore" :class="{ popActive: scoreRange == '1-2'}" class="item">1分-2分</div>
            </div>
            <div class="lastitemBox">
              <div @click="choiceScore" :class="{ popActive: scoreRange == '0-1'}" class="item">1分以下</div>
            </div>
          </div>
        </div>
        <!-- 确认取消 -->
        <div class="bottomBox">
          <div @click="isChoice = false" class="cancleBtn">取消</div>
          <div @click="submitOptions" class="confirmBtn">确认</div>
        </div>
      </van-popup>
    </div>
    <!-- 公司列表 -->
    <div class="empty"></div>
    <comList :companyLists="companyLists" />
  </div>
</template>
<script>
// 企业列表
import { companyList } from '@/api/api.js'
export default {
  data () {
    return {
      // 获取企业列表参数
      start: 0,
      limit: 5,
      q: '',
      distance: 'asc',
      score: 'asc',
      scoreRange: '0-5',
      // 筛选的值
      option: true, // 默认
      option1: false, // 距离1
      option2: false, // 距离2
      option3: false, // 评分1
      option4: false, // 评分2
      // 弹出面板
      isChoice: false,
      // 公司列表
      companyLists: []
    }
  },
  methods: {
    // 获取企业列表
    // 推荐排名，默认
    async getCompanys () {
      try {
        const res = await companyList({
          start: 0,
          limit: 20,
          // q: '',
          scoreRange: '0-5'
          // distance: 'asc'
          // score: 'asc'
        })
        console.log(res)
        this.companyLists = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    // 点击推荐，获取推荐
    tuijian () {
      this.option = true
      this.option1 = false
      this.option2 = false
      this.option3 = false
      this.option4 = false
      this.getCompanys()
    },
    // 点击juli，获取juli
    async selectDistance () {
      this.option = false
      this.option1 = !this.option1
      this.option2 = !this.option1
      const sortDis = this.option1 ? 'asc' : 'desc'
      let sortScore = null
      if (!this.option3 && !this.option4) {
        sortScore = null
      } else {
        sortScore = this.option3 ? 'asc' : 'desc'
      }
      const param = {
        start: 0,
        limit: 20,
        q: this.q,
        scoreRange: '0-5',
        distance: sortDis,
        score: sortScore
      }
      console.log(param)
      const res = await companyList(param)
      this.companyLists = res.data.list
      console.log(this.companyLists)
    },
    // 点击分数 获取分数
    async selectScore () {
      this.option = false
      this.option3 = !this.option3
      this.option4 = !this.option3
      const sortScore = this.option3 ? 'asc' : 'desc'
      let sortDis = null
      if (!this.option1 && !this.option2) {
        sortDis = null
      } else {
        sortDis = this.option1 ? 'asc' : 'desc'
      }
      const param = {
        start: 0,
        limit: 20,
        q: '',
        scoreRange: '0-5',
        distance: sortDis,
        score: sortScore
      }
      console.log(param)
      const res = await companyList(param)
      this.companyLists = res.data.list
      console.log(this.companyLists)
    },
    // POP 距离选择方法
    showPopSelect () {
      this.option1 = !this.option1
      this.option2 = !this.option1
    },
    // 提交筛选数据
    async submitOptions () {
      this.isChoice = false
      this.option = false
      const sortDis = this.option1 ? 'asc' : 'desc'
      let sortScore = null
      sortScore = this.option3 ? 'asc' : 'desc'
      // 分数range
      const range = this.scoreRange
      const param = {
        start: 0,
        limit: 20,
        q: this.q,
        scoreRange: range,
        distance: sortDis,
        score: sortScore
      }
      console.log(param)
      const res = await companyList(param)
      this.companyLists = res.data.list
      // 清空
      this.scoreRange = ''
    },
    // 筛选评分
    choiceScore (e) {
      const str = e.target.innerText.replace(/[^0-9|-]/ig, '')
      this.scoreRange = str === '1' ? '0-1' : str
      console.log(this.scoreRange)
    },
    // 搜索
    onSearch () {
      this.submitOptions()
    }
  },
  components: {
    comList: () => import('./indexItem')
  },
  created () {
    this.getCompanys()
  }
}
</script>

<style lang="less" scoped>
.compony {
  padding: 15px;
  .comHead {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .empty {
    height: 230px;
    width: 100%;
  }
  .searchL {
    margin-right: 18px;
    font-weight: 600;
    font-size: 18px;
    color: #222222;
    padding: 10px;
  }
  /deep/.van-field__left-icon {
    margin-left: 30px;
  }
  .banner {
    margin-top: 10px;
    padding: 0 10px;
    img {
      width: 100%;
    }
  }
  .selectCom {
    display: flex;
    margin-top: 20px;
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    // 算中排序方法颜色
    .selectItem {
      color: red;
    }
    .tuijian,
    .distance,
    .score {
      margin-right: 30px;
    }
    .selectAll {
      flex: 1;
      text-align: right;
    }
    // 选中三角形
    .distance {
      position: relative;
      i {
        transform: scale(0.8);
      }
      .arrup {
        position: absolute;
        top: -5px;
        right: -12px;
        color: #cccccc;
      }
      .arrdown {
        position: absolute;
        top: 5px;
        right: -12px;
        color: #cccccc;
      }
      // 三角形颜色
      .selected {
        color: red;
      }
    }
    .score {
      position: relative;
      i {
        transform: scale(0.8);
      }
      .arrup {
        position: absolute;
        top: -5px;
        right: -12px;
        color: #cccccc;
      }
      .arrdown {
        position: absolute;
        top: 5px;
        right: -12px;
        color: #cccccc;
      }
      // 三角形颜色
      .selected {
        color: red;
      }
    }
  }
  // 筛选面板
  .choicePop {
    padding: 0 10px;
    .choiceItem {
      font-size: 14px;
      line-height: 32px;
      .popActive {
        color: red;
      }
      .distanceItem {
        text-align: center;
        display: flex;
        justify-content: space-evenly;
        .item {
          width: 165px;
          height: 32px;
          background-color: #eeeeee;
        }
      }
      .scoreItem {
        text-align: center;
        .itemBox {
          margin: 10px 0;
          display: flex;
          justify-content: space-evenly;
          .item {
            width: 165px;
            height: 32px;
            background-color: #eeeeee;
          }
        }
        .lastitemBox {
          .item {
            margin-left: 15px;
            width: 165px;
            height: 32px;
            background-color: #eeeeee;
          }
        }
      }
    }
    .bottomBox {
      margin-top: 80px;
      text-align: center;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      .cancleBtn {
        width: 82px;
        height: 50px;
        margin: 0 0 0 15px;
        flex: 1;
        color: red;
        background-color: pink;
        border-radius: 10px;
      }
      .confirmBtn {
        flex: 2;
        margin: 0 15px;
        color: #fff;
        background-color: red;
        border-radius: 10px;
      }
    }
  }
}
</style>
<style>
@font-face {
  font-family: 'iconfont'; /* project id 2062957 */
  src: url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.eot');
  src: url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.eot?#iefix')
      format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.woff') format('woff'),
    url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2062957_m0uerhsiv9c.svg#iconfont') format('svg');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
